<template>
    <div>
        <h3>State</h3>
        <p>a:{{ mdA.a }}</p>
        <p>b:{{ mdA.b }}</p>
        <hr>
        <h3>getters</h3>
        <p>doubleA:{{ mdA.doubleA }}</p>
        <p>doubleB:{{ mdA.doubleB }}</p>
        <p>both:{{ mdA.both }}</p>
        <p>doubleBoth:{{ mdA.doubleBoth }}</p>
        <h3>方法_同步</h3>
        <p><button @click="mdA.addA(10)">a++</button><button @click="mdA.a++">a++</button></p>
        <p><button @click="mdA.addB">b++</button><button @click="mdA.b++">b++</button></p>

        <h3>方法_异步</h3>
        <p><button @click="mdA.addA_Async(10)">a++</button></p>
        <p><button @click="mdA.addB_Async">b++</button></p>
        <p><button @click="mdA.addBoth_Async">both++</button></p>
    </div>
</template>

<script>
    import {useMdaStore} from "@/stores/mda.js";

    // 选项式 => 手搓板 

    const mdA = useMdaStore(); // 调用此方法 => 得到store实例

    export default {
        name:"PiniaBaseView",
        data(){
            return {
                mdA
            }
        },
        mounted(){
            console.log("mdA",this.mdA);
        }
    }
</script>

<style lang="scss" scoped>

</style>